<template>
  <div class="api-management">
    <div class="page-header">
      <h2>接口管理</h2>
      <button class="add-btn" @click="showAddDialog = true">
        <span>+</span> 添加接口
      </button>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <div class="search-bar">
        <input 
          v-model="searchQuery" 
          type="text" 
          placeholder="搜索接口名称或URL..."
          class="search-input"
        >
        <button class="search-btn">搜索</button>
      </div>
      <div class="filter-section">
        <select v-model="statusFilter" class="filter-select">
          <option value="">全部状态</option>
          <option value="active">启用</option>
          <option value="inactive">禁用</option>
        </select>
        <select v-model="methodFilter" class="filter-select">
          <option value="">全部方法</option>
          <option value="GET">GET</option>
          <option value="POST">POST</option>
          <option value="PUT">PUT</option>
          <option value="DELETE">DELETE</option>
        </select>
      </div>
    </div>

    <!-- 接口列表 -->
    <div class="api-list">
      <div class="list-header">
        <div class="header-item">接口名称</div>
        <div class="header-item">请求方法</div>
        <div class="header-item">URL</div>
        <div class="header-item">状态</div>
        <div class="header-item">最后更新</div>
        <div class="header-item">操作</div>
      </div>
      
      <div 
        v-for="api in filteredApis" 
        :key="api.id" 
        class="list-item"
      >
        <div class="item-content">{{ api.name }}</div>
        <div class="item-content">
          <span :class="['method-tag', api.method.toLowerCase()]">
            {{ api.method }}
          </span>
        </div>
        <div class="item-content url-cell">{{ api.url }}</div>
        <div class="item-content">
          <span :class="['status-tag', api.status]">
            {{ api.status === 'active' ? '启用' : '禁用' }}
          </span>
        </div>
        <div class="item-content">{{ api.updatedAt }}</div>
        <div class="item-content actions">
          <button @click="editApi(api)" class="action-btn edit">编辑</button>
          <button @click="testApi(api)" class="action-btn test">测试</button>
          <button @click="deleteApi(api.id)" class="action-btn delete">删除</button>
        </div>
      </div>
    </div>

    <!-- 添加/编辑接口对话框 -->
    <div v-if="showAddDialog || showEditDialog" class="dialog-overlay" @click="closeDialog">
      <div class="dialog" @click.stop>
        <div class="dialog-header">
          <h3>{{ showAddDialog ? '添加接口' : '编辑接口' }}</h3>
          <button @click="closeDialog" class="close-btn">×</button>
        </div>
        <div class="dialog-content">
          <div class="form-group">
            <label>接口名称</label>
            <input v-model="currentApi.name" type="text" class="form-input">
          </div>
          <div class="form-group">
            <label>请求方法</label>
            <select v-model="currentApi.method" class="form-select">
              <option value="GET">GET</option>
              <option value="POST">POST</option>
              <option value="PUT">PUT</option>
              <option value="DELETE">DELETE</option>
            </select>
          </div>
          <div class="form-group">
            <label>URL</label>
            <input v-model="currentApi.url" type="text" class="form-input">
          </div>
          <div class="form-group">
            <label>描述</label>
            <textarea v-model="currentApi.description" class="form-textarea"></textarea>
          </div>
          <div class="form-group">
            <label>状态</label>
            <select v-model="currentApi.status" class="form-select">
              <option value="active">启用</option>
              <option value="inactive">禁用</option>
            </select>
          </div>
        </div>
        <div class="dialog-footer">
          <button @click="closeDialog" class="btn-cancel">取消</button>
          <button @click="saveApi" class="btn-save">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApiManagement',
  data() {
    return {
      searchQuery: '',
      statusFilter: '',
      methodFilter: '',
      showAddDialog: false,
      showEditDialog: false,
      currentApi: {
        id: null,
        name: '',
        method: 'GET',
        url: '',
        description: '',
        status: 'active'
      },
      apis: [
        {
          id: 1,
          name: '用户登录',
          method: 'POST',
          url: '/api/auth/login',
          status: 'active',
          updatedAt: '2024-01-15 10:30:00',
          description: '用户登录接口'
        },
        {
          id: 2,
          name: '获取用户信息',
          method: 'GET',
          url: '/api/user/profile',
          status: 'active',
          updatedAt: '2024-01-14 16:20:00',
          description: '获取当前用户信息'
        },
        {
          id: 3,
          name: '更新用户信息',
          method: 'PUT',
          url: '/api/user/profile',
          status: 'inactive',
          updatedAt: '2024-01-13 14:15:00',
          description: '更新用户个人信息'
        },
        {
          id: 4,
          name: '删除用户',
          method: 'DELETE',
          url: '/api/user/:id',
          status: 'active',
          updatedAt: '2024-01-12 09:45:00',
          description: '删除指定用户'
        }
      ]
    }
  },
  computed: {
    filteredApis() {
      return this.apis.filter(api => {
        const matchesSearch = !this.searchQuery || 
          api.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          api.url.toLowerCase().includes(this.searchQuery.toLowerCase())
        
        const matchesStatus = !this.statusFilter || api.status === this.statusFilter
        const matchesMethod = !this.methodFilter || api.method === this.methodFilter
        
        return matchesSearch && matchesStatus && matchesMethod
      })
    }
  },
  methods: {
    editApi(api) {
      this.currentApi = { ...api }
      this.showEditDialog = true
    },
    testApi(api) {
      alert(`测试接口: ${api.name} (${api.method} ${api.url})`)
    },
    deleteApi(id) {
      if (confirm('确定要删除这个接口吗？')) {
        this.apis = this.apis.filter(api => api.id !== id)
      }
    },
    saveApi() {
      if (this.showAddDialog) {
        // 添加新接口
        const newId = Math.max(...this.apis.map(api => api.id)) + 1
        this.apis.push({
          ...this.currentApi,
          id: newId,
          updatedAt: new Date().toLocaleString('zh-CN')
        })
      } else {
        // 更新现有接口
        const index = this.apis.findIndex(api => api.id === this.currentApi.id)
        if (index !== -1) {
          this.apis[index] = {
            ...this.currentApi,
            updatedAt: new Date().toLocaleString('zh-CN')
          }
        }
      }
      this.closeDialog()
    },
    closeDialog() {
      this.showAddDialog = false
      this.showEditDialog = false
      this.currentApi = {
        id: null,
        name: '',
        method: 'GET',
        url: '',
        description: '',
        status: 'active'
      }
    }
  }
}
</script>

<style scoped>
.api-management {
  padding: 20px;
  background: #ffffff;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  color: #333;
  margin: 0;
}

.add-btn {
  background: #409eff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.add-btn:hover {
  background: #337ecc;
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e8e8e8;
}

.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.search-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.search-btn {
  background: #409eff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.filter-section {
  display: flex;
  gap: 15px;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.api-list {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e8e8e8;
  overflow: hidden;
}

.list-header {
  display: grid;
  grid-template-columns: 2fr 1fr 3fr 1fr 2fr 2fr;
  background: #f8fafc;
  padding: 15px 20px;
  font-weight: bold;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.list-item {
  display: grid;
  grid-template-columns: 2fr 1fr 3fr 1fr 2fr 2fr;
  padding: 15px 20px;
  border-bottom: 1px solid #f1f5f9;
  align-items: center;
  transition: all 0.2s ease;
}

.list-item:hover {
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.item-content {
  font-size: 14px;
  color: #333;
}

.url-cell {
  font-family: monospace;
  font-size: 12px;
  color: #666;
}

.method-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.method-tag.get { background: #e7f5e7; color: #52c41a; }
.method-tag.post { background: #fff2e8; color: #fa8c16; }
.method-tag.put { background: #e6f7ff; color: #1890ff; }
.method-tag.delete { background: #fff1f0; color: #ff4d4f; }

.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-tag.active {
  background: #e7f5e7;
  color: #52c41a;
}

.status-tag.inactive {
  background: #fff1f0;
  color: #ff4d4f;
}

.actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.action-btn.edit {
  background: #e6f7ff;
  color: #1890ff;
}

.action-btn.test {
  background: #f6ffed;
  color: #52c41a;
}

.action-btn.delete {
  background: #fff1f0;
  color: #ff4d4f;
}

.action-btn:hover {
  opacity: 0.8;
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog {
  background: white;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
  width: 500px;
  max-width: 90vw;
  max-height: 80vh;
  overflow: auto;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.dialog-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.dialog-content {
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-textarea {
  height: 80px;
  resize: vertical;
}

.dialog-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-cancel {
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.btn-save {
  padding: 10px 20px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-save:hover {
  background: #337ecc;
}
</style>